<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/5/11
  Time: 10:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
    .td-content {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 300px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
    }
</style>
<script>

    //jquery页面加载时执行的方法
    $(function () {
        chaxunCompany();
    })


    //对于onload事件，不能跳出我们的框架，嵌套
    //ajax语法，$.ajax({})  可以看出，小括号里面是一个对象{}，
    //对于js来说，对象的格式{"":"","":""}key:value,
    // 如果是json格式：一般情况下我们的key会用引号括起来，其他情况下可以不需要引号
    //js对引号不敏感，js对于字符和字节都表示字符，js没有字节的说法，
    //调用后台的地址，可以用完整的地址，也可以直接调用断后后面的地址
    //区别在于：如果是完整的地址，随时随地都可以用
    //如果是只有断后后面的地址：只能是本地，http://localhost:8080只能是前后端未分离，在一起的时候，
    // 默认就是当前项目的地址
    function chaxunCompany() {
        //要得到电话的值，可以有两种方式：
        // 1.js ,定义一个变量 得到电话的值
        var jsPhone = document.getElementById("phone").value;//拿到phone的对象
        // console.log(jsPhone);
        // alert(jsPhone);
        // 2.jquery
        var jqPhone = $("#phone").val();//jQuery得到phone的值
        //jquery是别人（第三方）写的一个技术框架，
        // ajax页面局部刷新
        $.ajax({
            url: '/companySelect',//调用后台的地址，可以用完整的地址，
            data: {phone: jqPhone},//传递给后台的数据，为json格式，对象{}，
            type: 'get',//调用后台的方法类型：get，post ，get和post的区别，get查询效率快，post用于增加，删除，修改
            dataType: 'json',//返回页面值的对象格式
            success: function (data) {//调用成功后返回给页面的值data
                //得到数据后，我们需要将数据进行整理，然后赋值给我们需要的地方
                setCompanyTableData(data);
            },
            error: function (data) {//执行后台错误的时候调用的方法

            }
        })
    }

    //将得到的数据进行赋值
    //面向对象编程，就是一个方法里面只做一件事情，这个也符合我们以后用的设计模式的六大原则，单一职责
    function setCompanyTableData(data) {//方法名命名规则，见名知意
        var html = '';//设定一个html变量，赋值为空

        //遇到数组，必须有循环，将所有的数据读取出来
        //循环的选择：
        // while，不知道要循环多少次 while(true){}
        // do while，这里至少执行一次，然后循环 不知道要循环多少次
        // 举例：如果想要死循环，用while就好
        // for， 知道要循环多少次 (var i=0;i<data.length;i++) var id=data[i].id
        // foreach  增强for循环( var aa:data ) aa即是data里面的每一个对象  var id=aa.id

        console.log(data.length);
        for (var i = 0; i < data.length; i++) {
            //拼接字符串
            html += ' <tr>\n' +
                '            <td>' + data[i].id + '</td>\n' +
                '            <td>' + data[i].name + '</td>\n' +
                '            <td>' + data[i].logo + '</td>\n' +
                '            <td>' + data[i].phone + '</td>\n' +
                '            <td>' + data[i].net + '</td>\n' +
                '            <td>' + data[i].email + '</td>\n' +
                '            <td>' + data[i].linePhone + '</td>\n' +
                '            <td class="td-content">' + data[i].content + '</td>\n' +
                '            <td>' + data[i].address + '</td>\n' +
                '            <td>' + data[i].version + '</td>\n' +
                '            <td>编辑 删除</td>\n' +
                '        </tr>';
        }

        $("#companyTbody").html(html);//赋值：将table里面的信息赋值到这个id里面
        //jQuery的赋值，取值，
        // 赋值即$("id").html(rains);
        // 取值：var value=$("id").html()；
    }

    //通过页面搜索条件进行查询
    function chaxunCompanyBySome() {

        //通过Ajax来进行查询，首先我们需要写出Ajax的格式
        //jQuery取值赋值的时候，如果是要得到文本的值text，则用val(),如果是要得到html的值，用html();
        //代码自动对齐：ctrl+shift+f
        //传值给后台代码的时候，需要对取得的值进行空格处理
        //.trim()。删除值两边的空格
        // var phonejs = document.getElementById("phone").value.trim();


        //当用户通过复制或者直接打空格的方式输入空格，我们直接显示值，把空格去掉

        var data = {
            phone: $("#phone").val(),
            name: $("#name").val(),
            net: $("#net").val(),
            content: $("#content").val(),
            address: $("#address").val()
        };
        $.ajax({
            url: '/companySelectBySome',
            data: data,
            type: 'get',
            dataType: 'json',
            success: function (data) {
                //查询后，我们需要进行赋值

                setCompanyTableData(data);//将赋值的代码单独提取出来，主要是为了复用，解耦

            }
        })

    }

    function shiqu(e) {
        //trim只能去掉左右两边的空格，不能去掉中间的空格，
        // 如果想要去掉中间的空格，需要用到正则表达式
        $(e).val($.trim($(e).val()));
        // $("#name").val($.trim($("#name").val()));
        // $("#net").val($.trim($("#net").val()));
        // $("#content").val($.trim($("#content").val()));
        // $("#address").val($.trim($("#address").val()));
    }
</script>
<body>
<%--加载页面的时候，需要进入后台查询数据，所以我们这里用到Ajax--%>
电话：<input type="text" id="phone" value="" onblur="shiqu(this)">
公司名称：<input type="text" id="name" value="" onblur="shiqu(this)">
网址：<input type="text" id="net" value="" onblur="shiqu(this)">
介绍：<input type="text" id="content" value="" onblur="shiqu(this)">
地址：<input type="text" id="address" value="" onblur="shiqu(this)">
<input type="button" value="查询" onclick="chaxunCompanyBySome()">
<%--<a href="#" onclick="chaxunCompany()">查询</a>--%>
<table class="table table-hover">
    <thead>
    <tr>
        <td>id</td>
        <td width="200px">公司名称</td>
        <td>logo</td>
        <td>手机</td>
        <td>网址</td>
        <td>邮箱</td>
        <td>座机</td>
        <td style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;width: 300px">介绍
        </td>
        <td width="300px">地址</td>
        <td>版本</td>
        <td>操作</td>
    </tr>
    </thead>
    <tbody id="companyTbody">
    </tbody>
</table>
</body>
</html>
